import React, { useEffect, useState } from 'react'
import { useLocation } from "react-router-dom";
import { useNavigate } from 'react-router-dom';
import { Toast } from 'antd-mobile'

export default function Czs_details() {
    const navigate = useNavigate()
    const location = useLocation()
    const { id } = location.state
    const [details, setDetails] = useState([
        {
            id: 1,
            img: "./listimgs/房屋清洁.jpeg",
            typeId: 1,
            user: "王小小",
            content: "房屋清洁",
            price: 200,
            score: 4.8,
            evaluate: 4479,
            collect: 0,
            type: '清洁服务',
            address: '北京市海淀区西二旗北路10号',
            synopsis: '我们的清洁维修服务旨在为您提供综合的清洁和维修解决方案，确保您的环境干净、整洁、安全。我们的专业团队具备泛的清洁和维修经验',
            img1: "./czs_imgs/打扫1.jpeg",
            img2: "./czs_imgs/打扫2.jpg",
            img3: "./czs_imgs/打扫3.jpeg",
            img4: "./czs_imgs/打扫4.jpg",
            img5: "./czs_imgs/打扫5.jpeg",
            img6: "./czs_imgs/打扫6.jpg",
        },
        {
            id: 2,
            img: "./listimgs/地板清洁.jpeg",
            typeId: 1,
            user: "李名扬",
            content: "地板清洁",
            price: 230,
            score: 4.9,
            evaluate: 6182,
            collect: 0,
            type: '清洁服务',
            address: '北京市海淀区西二旗北路10号',
            synopsis: '我们的清洁维修服务旨在为您提供综合的清洁和维修解决方案，确保您的环境干净、整洁、安全。我们的专业团队具备泛的清洁和维修经验',
            img1: "./czs_imgs/打扫1.jpeg",
            img2: "./czs_imgs/打扫2.jpg",
            img3: "./czs_imgs/打扫3.jpeg",
            img4: "./czs_imgs/打扫4.jpg",
            img5: "./czs_imgs/打扫5.jpeg",
            img6: "./czs_imgs/打扫6.jpg",
        },
        {
            id: 3,
            img: "./listimgs/衣物清洁1.jpeg",
            typeId: 1,
            user: "张小花",
            content: "衣物清洁",
            price: 150,
            score: 4.7,
            evaluate: 7938,
            collect: 1,
            type: '清洁服务',
            address: '北京市海淀区西二旗北路10号',
            synopsis: '我们的清洁维修服务旨在为您提供综合的清洁和维修解决方案，确保您的环境干净、整洁、安全。我们的专业团队具备泛的清洁和维修经验',
            img1: "./czs_imgs/打扫1.jpeg",
            img2: "./czs_imgs/打扫2.jpg",
            img3: "./czs_imgs/打扫3.jpeg",
            img4: "./czs_imgs/打扫4.jpg",
            img5: "./czs_imgs/打扫5.jpeg",
            img6: "./czs_imgs/打扫6.jpg",
        },
        {
            id: 4,
            img: "./listimgs/浴室清洁.jpeg",
            typeId: 1,
            user: "张芯芯",
            content: "浴室清洁",
            price: 210,
            score: 4.9,
            evaluate: 6182,
            collect: 0,
            type: '清洁服务',
            address: '北京市海淀区西二旗北路10号',
            synopsis: '我们的清洁维修服务旨在为您提供综合的清洁和维修解决方案，确保您的环境干净、整洁、安全。我们的专业团队具备泛的清洁和维修经验',
            img1: "./czs_imgs/打扫1.jpeg",
            img2: "./czs_imgs/打扫2.jpg",
            img3: "./czs_imgs/打扫3.jpeg",
            img4: "./czs_imgs/打扫4.jpg",
            img5: "./czs_imgs/打扫5.jpeg",
            img6: "./czs_imgs/打扫6.jpg",
        },
        {
            id: 5,
            img: "./listimgs/衣物清洁2.jpeg",
            typeId: 1,
            user: "杨雨涛",
            content: "衣物清洁",
            price: 150,
            score: 2.5,
            evaluate: 938,
            collect: 1,
            type: '清洁服务',
            address: '北京市海淀区西二旗北路10号',
            synopsis: '我们的清洁维修服务旨在为您提供综合的清洁和维修解决方案，确保您的环境干净、整洁、安全。我们的专业团队具备泛的清洁和维修经验',
            img1: "./czs_imgs/打扫1.jpeg",
            img2: "./czs_imgs/打扫2.jpg",
            img3: "./czs_imgs/打扫3.jpeg",
            img4: "./czs_imgs/打扫4.jpg",
            img5: "./czs_imgs/打扫5.jpeg",
            img6: "./czs_imgs/打扫6.jpg",
        },
    ]);
    const newdetails = details.filter(item => item.id == id)
    return (
        <div>
            {newdetails.map(item => {
                return <div className='czs_details_box' key={item.id}>
                    <div>
                        <img onClick={() => {
                            navigate(-1)
                        }} className='czs_details_back' src="./czs_imgs/返回白色.png" alt="" />
                        <img className="czs_details_img" src={item.img} alt="" />
                    </div>
                    <div className='czs_details_item'>
                        <div>
                            <span className='czs_details_font_size'><b>{item.content}</b></span>
                        {item.collect == 0 ? <img onClick={() => {
                                setDetails(details.map(item => {item.collect = 1; return item}))
                                Toast.show({
                                    icon: 'success',
                                    content: '收藏成功',
                                })
                            }} className='czs_details_collect' src="./czs_imgs/收藏.png" alt="" /> : <img onClick={() => {
                                setDetails(details.map(item => { item.collect = 0; return item }))
                                Toast.show({
                                    icon: 'success',
                                    content: '取消成功',
                                })
                            }} className='czs_details_collect' src="./czs_imgs/收藏选中.png" alt="" />}
                        </div>
                        <div className='czs_details_box1'>
                            <span className='czs_details_user'>{item.user}</span>
                            <img className='czs_details_star' src="./czs_imgs/星星.png" alt="" />
                            <span className='czs_details_score'>{item.score}({item.evaluate}评价)</span>
                        </div>
                        <div className='czs_details_box2'>
                            <span className='czs_details_type'>{item.type}</span>
                            <img className='czs_details_address_img' src="./czs_imgs/地址.png" alt="" />
                            <span className='czs_details_address'>{item.address}</span>
                        </div>
                        <div className='czs_details_box3'>
                            <span className='czs_details_price'>￥{item.price}</span>
                            <span className='czs_details_price_unit'>（每日价格）</span>
                        </div>
                    </div>
                    <hr className='czs_details_hr' />
                    <div className='czs_details_item'>
                        <p className='czs_details_synopsis_top'><b className='czs_details_font_size'>关于我们</b></p>
                        <p className='czs_details_synopsis'>{item.synopsis}&nbsp;&nbsp;<span className='czs_details_synopsis_span'>查看更多...</span></p>
                    </div>
                    <div className='czs_details_item'>
                        <p className='czs_details_anli_top'>
                            <b className='czs_details_font_size'>案例展示</b>
                            <span className='czs_details_anli_span'>查看全部</span>
                        </p>
                        <div className='czs_details_imgs'>
                            <div className='czs_details_imgs_left'>
                                <div className='czs_details_imgs_left_1'>
                                    <img className='czs_details_imgs_left_1_img1' src={item.img1} alt="" />
                                </div>
                                <div className='czs_details_imgs_left_2'>
                                    <img className='czs_details_imgs_left_1_img2' src={item.img5} alt="" />
                                    <img className='czs_details_imgs_left_1_img2' src={item.img3} alt="" />
                                </div>
                            </div>
                            <div className="czs_details_imgs_right">
                                <div className='czs_details_imgs_left_2'>
                                    <img className='czs_details_imgs_left_1_img2' src={item.img2} alt="" />
                                    <img className='czs_details_imgs_left_1_img2' src={item.img4} alt="" />
                                </div>
                                <div className='czs_details_imgs_left_1'>
                                    <img className='czs_details_imgs_left_1_img1' src={item.img6} alt="" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className='czs_details_bottom'>
                        <button className='czs_details_bottom_btn1' onClick={() => {
                            navigate('/lmsg')
                        }}>在线咨询</button>
                        <button className='czs_details_bottom_btn2' onClick={() => {
                            navigate('/czs_settlement', { state: { content: item.content, type: item.type }})
                        }}>立即预约</button>
                    </div>
                </div>
            })}
        </div>
    )
}
